<m-notice [icon]="'flaticon-exclamation m--font-primary'">
	For more info please check the components's official demos & documentation 
	<a class="m-link" href="https://material.angular.io/components/select/overview" target="_blank">demos & documentation</a>
</m-notice>


<div class="row">
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleBasicSelect">
			<div class="m-section">
				<span class="m-section__sub">
					<code>mat-select</code> is a form control for selecting a value from a set of options, similar to the native
					<code>&lt;select&gt;</code> element. You can read more about selects in the Material Design spec. It is designed to work inside of a
					<code>mat-form-field</code> element.
				</span>
				<div class="m-separator m-separator--dashed"></div>
				<div class="example-container">
					<mat-form-field>
						<mat-select placeholder="Favorite food">
							<mat-option *ngFor="let food of foods" [value]="food.value">
								{{ food.viewValue }}
							</mat-option>
						</mat-select>
					</mat-form-field>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleSelectWith2WayValueBinding">
			<div class="m-section">
				<div class="example-container">
					<mat-form-field>
						<mat-select [(value)]="selected">
							<mat-option>None</mat-option>
							<mat-option value="option1">Option 1</mat-option>
							<mat-option value="option2">Option 2</mat-option>
							<mat-option value="option3">Option 3</mat-option>
						</mat-select>
					</mat-form-field>
					<div class="m-separator m-separator--dashed"></div>

					You selected:
					<mark *ngIf="selected">{{selected}}</mark>
				</div>
			</div>

		</m-material-preview>

		<m-material-preview [viewItem]="exampleSelectInAForm">
			<div class="m-section">
				<div class="example-container">
					<form class="example-container">
						<mat-form-field>
							<mat-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
								<mat-option *ngFor="let food of foods" [value]="food.value">
									{{food.viewValue}}
								</mat-option>
							</mat-select>
						</mat-form-field>

						<div class="m-separator m-separator--dashed"></div>Selected value:
						<mark *ngIf="selectedValue">{{selectedValue}}</mark>
					</form>
				</div>
			</div>

		</m-material-preview>

		<m-material-preview [viewItem]="exampleSelectWithFormFieldFeature">
			<div class="m-section">
				<div class="example-container">
					<mat-form-field>
						<mat-select placeholder="Favorite animal" [formControl]="animalControl" required>
							<mat-option>--</mat-option>
							<mat-option *ngFor="let animal of animals" [value]="animal">
								{{animal.name}}
							</mat-option>
						</mat-select>
						<mat-error *ngIf="animalControl.hasError('required')">Please choose an animal</mat-error>
						<mat-hint>{{animalControl.value?.sound}}</mat-hint>
					</mat-form-field>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleSelectWithResetOption">
			<div class="m-section">
				<div class="example-container">
					<mat-form-field>
						<mat-select placeholder="State">
							<mat-option>None</mat-option>
							<mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
						</mat-select>
					</mat-form-field>
				</div>
			</div>
		</m-material-preview>
	</div>
	<div class="col-xl-6">

		<m-material-preview [viewItem]="exampleSelectWithOptionGroups">
			<div class="m-section">
				<div class="example-container">
					<mat-form-field>
						<mat-select placeholder="Pokemon" [formControl]="pokemonControl">
							<mat-option>-- None --</mat-option>
							<mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name" [disabled]="group.disabled">
								<mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
									{{ pokemon.viewValue }}
								</mat-option>
							</mat-optgroup>
						</mat-select>
					</mat-form-field>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleSelectWithMultipleSelection">
			<div class="m-section">
				<div class="example-container">
					<mat-form-field>
						<mat-select placeholder="Toppings" [formControl]="toppings" multiple>
							<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
						</mat-select>
					</mat-form-field>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleSelectWithCustomTriggerText">
			<div class="m-section">
				<div class="example-container">
					<mat-form-field>
						<mat-select placeholder="Toppings" [formControl]="toppings2" multiple>
							<mat-select-trigger>
								{{toppings2.value ? toppings2.value[0] : ''}}
								<span *ngIf="toppings2.value?.length > 1" class="example-additional-selection">
									(+{{toppings2.value.length - 1}} others)
								</span>
							</mat-select-trigger>
							<mat-option *ngFor="let topping of toppingList2" [value]="topping">{{topping}}</mat-option>
						</mat-select>
					</mat-form-field>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleSelectWithCustomPanelStyling">
			<div class="m-section">
				<div class="example-container">
					<mat-form-field>
						<mat-select placeholder="Panel color" [formControl]="panelColor" panelClass="example-panel-{{panelColor.value}}">
							<mat-option value="red">Red</mat-option>
							<mat-option value="green">Green</mat-option>
							<mat-option value="blue">Blue</mat-option>
						</mat-select>
					</mat-form-field>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleSelectWithACustomErrorStateMatcher">
			<div class="m-section">
				<div class="example-container">
					<mat-form-field>
						<mat-select placeholder="Choose one" [formControl]="selected2" [errorStateMatcher]="matcher">
							<mat-option>Clear</mat-option>
							<mat-option value="valid">Valid option</mat-option>
							<mat-option value="invalid">Invalid option</mat-option>
						</mat-select>
						<mat-hint>Errors appear instantly!</mat-hint>
						<mat-error *ngIf="selected2.hasError('required')">You must make a selection</mat-error>
						<mat-error *ngIf="selected2.hasError('pattern') && !selected2.hasError('required')">
							Your selection is invalid
						</mat-error>
					</mat-form-field>
				</div>
			</div>
		</m-material-preview>
	</div>
</div>